.online_kefu{ position: fixed;  bottom: 20vh;right:5%;z-index: 9;}

.online_kefu ul{ padding:20px 0; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;}
.online_kefu ul:before,.online_kefu ul:after{ content: ''; background-color: #e67817; display: block; height:20px; width:100%;}
.online_kefu ul:before{-webkit-border-radius: 40px 40px 0 0;-moz-border-radius: 40px 40px 0 0;}
.online_kefu ul:after{-webkit-border-radius:  0 0 40px 40px;-moz-border-radius: 0 0 40px 40px;}
.online_kefu ul li{ width:40px; height:40px; text-align: center; margin:5px 0; position: relative;  color: #fff; cursor: pointer; transition: background-color .2s linear 0s;perspective:1000;transform-style:preserve-3d;    background:#35a55d;}

.online_kefu li i{font-size: 2rem; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; transition: all .2s;}
.online_kefu ul li a{ color: #fff;}
.online_kefu ul li .con{ position: relative; line-height:40px;}
.online_kefu ul li .hover_con{ position: absolute;	left:-200px;left:-100px;	width: 100px;	color: #ffffff;text-align: center;background-color: #003282;height:40px; line-height:40px; bottom:0; transform:rotateX(-90deg); transition: all .2s linear 0s; }
.online_kefu ul li.tel .hover_con{width:120px;}
.online_kefu ul li .hover_con img{ width:100px;}
.online_kefu ul li.qrcode {  }
.online_kefu ul li.qrcode .hover_con{ height: 137px;padding: 10px;width: 130px;left: -141px;}
.online_kefu ul li.qrcode .hover_con p{ color: #fff; line-height:24px;}

.online_kefu li:hover{color: #003282;background: rgba(3, 132, 74, .5); }
.online_kefu li:hover .iconfont{color: #003282;}
.online_kefu li:hover .hover_con{left:-110px; transform:rotateY(0deg);}
.online_kefu li.tel:hover .hover_con{left:-130px}
.online_kefu li .hover_con:before{width: 0px;height: 0px;border: 8px solid transparent;border-left: 8px solid #003282; display: block; content: '';position: absolute; top: 12px;right: -16px; transition: top .2s linear ; transition-delay: .1s; }

.online_kefu li.qrcode:hover .hover_con{  bottom: -60px;}
.online_kefu li.qrcode:hover .hover_con:before{top: 48px;}

@media (max-width: 1366px) {
	.online_kefu{ right:2%;}
}